<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>容器应用-宿主机-创建</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../plugins/codemirror/codemirror.css">
    <link rel="stylesheet" href="../../plugins/codemirror/theme/darcula.css">
    <link rel="stylesheet" href="../../plugins/codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" href="../../plugins/ion-rangeslider/css/ion.rangeSlider.min.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-slider/css/bootstrap-slider.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
    <style>
        #volume > .row:not(:first-child) {
            margin-top: 15px;
        }
        #dns > .row:not(:first-child) {
            margin-top: 15px;
        }
        #env > .row:not(:first-child) {
            margin-top: 15px;
        }
        #label > .row:not(:first-child) {
            margin-top: 15px;
        }
        #host > .row:not(:first-child) {
            margin-top: 15px;
        }
        #port > .row:not(:first-child) {
            margin-top: 15px;
        }
    </style>
</head>
<body class="content-wrapper" style="padding: 15px">

<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title"><i class="fa fa-commenting"></i> 基本信息</h3>
        <div class="card-tools">
            <div class="btn-group">
                <button type="button" class="btn btn-tool dropdown-toggle" data-toggle="dropdown" data-offset="-54"><i class="fa fa-cog"></i> 页面设置</button>
                <div class="dropdown-menu" role="menu" style="">
                    <a href="javascript:void(0);" class="dropdown-item toggle-item" data-target="network">隐藏网络栏</a>
                    <a href="javascript:void(0);" class="dropdown-item toggle-item" data-target="port">隐藏端口栏</a>
                    <a href="javascript:void(0);" class="dropdown-item toggle-item" data-target="dns">隐藏DNS栏</a>
                    <a href="javascript:void(0);" class="dropdown-item toggle-item" data-target="host">隐藏HOSTS栏</a>
                    <a href="javascript:void(0);" class="dropdown-item toggle-item" data-target="volume">隐藏目录挂载栏</a>
                    <a href="javascript:void(0);" class="dropdown-item toggle-item" data-target="env">隐藏环境变量栏</a>
                    <a href="javascript:void(0);" class="dropdown-item toggle-item" data-target="label">隐藏标签栏</a>
                    <a href="javascript:void(0);" class="dropdown-item toggle-item" data-target="command">隐藏命令栏</a>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="form-group row">
            <label for="name" class="col-md-1 col-form-label">名称</label>
            <div class="col-md-5"><input type="text" class="form-control" id="name" placeholder="请输入容器名称"></div>
        </div>
        <div class="form-group row">
            <label class="col-md-1 col-form-label">镜像</label>
            <div id="image-select-group" class="col-md-5 input-group">
                <div class="input-group-prepend">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        选择
                    </button>
                    <div class="dropdown-menu">
                        <a id="image-select-change-input" class="dropdown-item" href="javascript:void(0)">输入</a>
                    </div>
                </div>
                <select class="form-control custom-select" id="image-select" style="margin-left: 1px"></select>
            </div>
            <div id="image-input-group" class="col-md-5 input-group" style="display: none">
                <div class="input-group-prepend">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        输入
                    </button>
                    <div class="dropdown-menu">
                        <a id="image-input-change-select" class="dropdown-item" href="javascript:void(0)">选择</a>
                    </div>
                </div>
                <input class="form-control" id="image-input" type="text" style="margin-left: 1px">
            </div>
        </div>
        <div class="form-group row">
            <label for="name" class="col-md-1 col-form-label">ARG</label>
            <div class="col-md-5"><input type="text" class="form-control" id="arg" placeholder="请输入容器运行参数ARG"></div>
        </div>
        <div class="form-group row">
            <label for="cpu" class="col-md-1 col-form-label" style="line-height: 60px">CPU配置</label>
            <div class="col-md-5" title="0表示不限制">
                <input type="number" class="slider form-control" id="cpu">
            </div>
        </div>
        <div class="form-group row">
            <label for="memory" class="col-md-1 col-form-label" style="line-height: 60px">内存配置</label>
            <div class="col-md-5" title="0表示不限制">
                <input type="number" class="slider form-control" id="memory">
            </div>
        </div>
        <div class="form-group row">
            <label for="hostname" class="col-md-1 col-form-label">主机名</label>
            <div class="col-md-5"><input type="text" class="form-control" id="hostname" placeholder="请输入主机名"></div>
        </div>
        <div class="form-group row">
            <label class="col-md-1 col-form-label">重启策略</label>
            <div class="col-md-5">
                <div class="icheck-info d-inline-block" title="从不重启">
                    <input id="restart-no" type="radio" name="filter" checked>
                    <label for="restart-no" style="font-weight: normal">NO</label>
                </div>
                <div class="icheck-info d-inline-block" title="Exit Code非0重启" style="margin-left: 15px">
                    <input id="restart-fail" type="radio" name="filter">
                    <label for="restart-fail" style="font-weight: normal">ON-FAILURE</label>
                </div>
                <div class="icheck-info d-inline-block" title="始终重启，且会随Docker Daemon一起启动" style="margin-left: 15px">
                    <input id="restart-always" type="radio" name="filter">
                    <label for="restart-always" style="font-weight: normal">ALWAYS</label>
                </div>
                <div class="icheck-info d-inline-block" title="始终重启，但不会随Docker Daemon一起启动" style="margin-left: 15px">
                    <input id="restart-unless" type="radio" name="filter">
                    <label for="restart-unless" style="font-weight: normal">UNLESS-STOPPED</label>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label for="privileged" class="col-md-1 col-form-label">特权模式</label>
            <div class="col-md-5">
                <div class="icheck-info">
                    <input id="privileged" type="checkbox" name="filter">
                    <label for="privileged" style="font-weight: normal">
                        开启特权模式后Docker会赋予容器几乎与主机相同的权限
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title" style="margin-top: 4px"><i class="fa fa-soundcloud"></i> 网络</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
    </div>
    <div id="network" class="card-body">
        <div class="form-group row">
            <label for="network" class="col-md-1 col-form-label">网络</label>
            <div class="col-md-5">
                <select id="network-select" class="form-control custom-select"></select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-1 col-form-label">IP地址</label>
            <div class="col-md-5">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label style="font-weight: normal" id="ip-address-auto" class="btn bg-info">
                                <input type="radio" name="ip-address" autocomplete="off" checked> 自动获取
                            </label>
                            <label style="font-weight: normal" id="ip-address-manu" class="btn bg-gray">
                                <input type="radio" name="ip-address" autocomplete="off"> 手工填写
                            </label>
                        </div>
                    </div>
                    <input id="ip-address-input" type="text" class="form-control" data-inputmask="'alias': 'ip'" style="display: none">
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-1 col-form-label">MAC地址</label>
            <div class="col-md-5">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label style="font-weight: normal" id="mac-address-auto" class="btn bg-info">
                                <input type="radio" name="mac-address" autocomplete="off" checked> 自动生成
                            </label>
                            <label style="font-weight: normal" id="mac-address-manu" class="btn bg-gray">
                                <input type="radio" name="mac-address" autocomplete="off"> 手工填写
                            </label>
                        </div>
                    </div>
                    <input id="mac-address-input" type="text" class="form-control" data-inputmask="'alias': 'mac'" style="display: none">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title" style="margin-top: 4px"><i class="fa fa-plug"></i> 端口</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-sm btn-outline-info btn-port-add"><i class="fa fa-plus"></i> 新增</button>
        </div>
    </div>
    <div id="port" class="card-body">
        <div class="row">
            <div class="col-md-2">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-info"><i class="fa fa-connectdevelop mr-1"></i> 容器端口</span>
                    </div>
                    <input type="number" min="1" max="65535" class="form-control input-port-container-port">
                </div>
            </div>
            <div class="col-md-2">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-info"><i class="fa fa-laptop mr-1"></i> 宿主机端口</span>
                    </div>
                    <input type="number" min="1" max="65535" class="form-control input-port-host-port">
                </div>
            </div>
            <div class="col-md-4">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label style="font-weight: normal" class="btn bg-info btn-port-host-ip-auto" data-uuid="{{uuid}}">
                                <input type="radio" name="port-host-ip-{{uuid}}" autocomplete="off" checked> 忽略宿主机IP
                            </label>
                            <label style="font-weight: normal" class="btn bg-gray btn-port-host-ip-manu" data-uuid="{{uuid}}">
                                <input type="radio" name="port-host-ip-{{uuid}}" autocomplete="off"> 指定宿主机IP
                            </label>
                        </div>
                    </div>
                    <input type="text" class="form-control input-port-host-ip-input" data-inputmask="'alias': 'ip'" data-uuid="{{uuid}}" style="display: none" >
                    <button type="button" class="btn btn-outline-danger ml-3 btn-port-del"><i class="fa fa-times mr-1"></i> 删除</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title" style="margin-top: 4px"><i class="fa fa-map"></i> DNS</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-sm btn-outline-info btn-dns-add"><i class="fa fa-plus"></i> 新增</button>
        </div>
    </div>
    <div id="dns" class="card-body">
        <div class="row">
            <div class="col-md-5">
                <input type="text" class="form-control input-dns-input" data-inputmask="'alias': 'ip'" >
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-danger btn-dns-del"><i class="fa fa-times mr-1"></i> 删除</button>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title" style="margin-top: 4px"><i class="fa fa-internet-explorer"></i> HOSTS</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-sm btn-outline-info btn-host-add"><i class="fa fa-plus"></i> 新增</button>
        </div>
    </div>
    <div id="host" class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-info"><i class="fa fa-feed mr-1"></i>域名</span>
                    </div>
                    <input type="text" class="form-control input-hosts-url">
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-info"><i class="fa fa-opencart mr-1"></i>IP</span>
                    </div>
                    <input type="text" class="form-control input-hosts-ip" data-inputmask="'alias': 'ip'" >
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-danger btn-host-del"><i class="fa fa-times mr-1"></i> 删除</button>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title" style="margin-top: 4px"><i class="fa fa-folder-open"></i> 目录挂载</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-sm btn-outline-info btn-volume-add"><i class="fa fa-plus"></i> 新增</button>
        </div>
    </div>
    <div id="volume" class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-info"><i class="fa fa-connectdevelop mr-1"></i> 容器目录</span>
                    </div>
                    <input type="text" class="form-control input-volume-container">
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-info"><i class="fa fa-laptop mr-1"></i> 宿主机目录</span>
                    </div>
                    <input type="text" class="form-control input-volume-host">
                </div>
            </div>
            <div class="col-md-2">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-info"><i class="fa fa-edit mr-1"></i> 模式</span>
                    </div>
                    <select class="form-control custom-select select-volume-mode">
                        <option value="rw">读写</option>
                        <option value="ro">只读</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-danger btn-volume-del"><i class="fa fa-times mr-1"></i> 删除</button>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title" style="margin-top: 4px"><i class="fa fa-modx"></i> 环境变量</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-sm btn-outline-info btn-env-add"><i class="fa fa-plus"></i> 新增</button>
        </div>
    </div>
    <div id="env" class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-info"><i class="fa fa-key mr-1"></i>KEY</span>
                    </div>
                    <input type="text" class="form-control input-env-key">
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-info"><i class="fa fa-file-code-o mr-1"></i>VALUE</span>
                    </div>
                    <input type="text" class="form-control input-env-value">
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-danger btn-env-del"><i class="fa fa-times mr-1"></i> 删除</button>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title" style="margin-top: 4px"><i class="fa fa-tags"></i> 标签</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-sm btn-outline-info btn-label-add"><i class="fa fa-plus"></i> 新增</button>
        </div>
    </div>
    <div id="label" class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-info"><i class="fa fa-key mr-1"></i>KEY</span>
                    </div>
                    <input type="text" class="form-control input-label-key">
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-info"><i class="fa fa-file-code-o mr-1"></i>VALUE</span>
                    </div>
                    <input type="text" class="form-control input-label-value">
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-danger btn-label-del"><i class="fa fa-times mr-1"></i> 删除</button>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title" style="margin-top: 4px"><i class="fa fa-terminal"></i> 命令</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
    </div>
    <div id="command" class="card-body">
        <textarea id="command-text"></textarea>
    </div>
    <div class="card-footer clearfix">
        <button id="command-show" type="button" class="btn btn-xs btn-outline-info float-right ml-1"><i class="fa fa-code"></i> 生成</button>
        <button id="command-copy" type="button" class="btn btn-xs btn-outline-info float-right"><i class="fa fa-copy"></i> 复制</button>
    </div>
</div>

<div class="clearfix">
    <button id="btn-cancel" type="button" class="btn btn-default pull-right ml-1"><i class="fa fa-times"></i> 取消</button>
    <button id="btn-ok" type="button" class="btn btn-info pull-right"><i class="fa fa-check"></i> 确定</button>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/inputmask/jquery.inputmask.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<script src="../../plugins/codemirror/codemirror.js"></script>
<script src="../../plugins/codemirror/mode/shell/shell.js"></script>
<script src="../../plugins/codemirror/addon/hint/show-hint.js"></script>
<script src="../../plugins/codemirror/addon/hint/anyword-hint.js"></script>
<script src="../../plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<script src="../../plugins/bootstrap-slider/bootstrap-slider.min.js"></script>
<script src="../../plugins/clipboard/clipboard.min.js"></script>
<script src="../../adminLTE/js/adminlte.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var params = Utils.getParams(location.href);
    var serverId = params["serverId"];

    $('#cpu').ionRangeSlider({min: 0, max: 100, step: 1, from: 0, type: "single", postfix: "C", grid: true});
    $('#memory').ionRangeSlider({min: 0, max: 1024, step: 1, from: 0, type: "single", postfix: "GB", grid: true});

    var imageSelectUrl = Url.dockerService.dockerImagePage + "?serverId=" + serverId;
    var imageSelectCtrl = new Select2Ctrl("#image-select", imageSelectUrl, "nameTag", "nameTag", "select");
    imageSelectCtrl.init();

    var networkSelectUrl = Url.dockerService.dockerNetworkPage + "?serverId=" + serverId;
    var networkSelectCtrl = new Select2Ctrl("#network-select", networkSelectUrl, "name", "nameSubnet", "select");
    networkSelectCtrl.init("bridge");

    $("#image-select-change-input").click(function () {
        $("#image-select-group").css("display", "none");
        $("#image-input-group").css("display", "flex");
    });
    $("#image-input-change-select").click(function () {
        $("#image-input-group").css("display", "none");
        $("#image-select-group").css("display", "flex");
    });

    var volumeTemplate = $("#volume").prop("innerHTML");
    $("#volume").html("");
    $(".btn-volume-add").click(function () {
        $("#volume").append(volumeTemplate);
    });
    $("#volume").on("click", ".btn-volume-del", function () {
        $(this).parents(".row").remove();
    });

    $("#ip-address-auto").click(function () {
        $("#ip-address-input").css("display", "none");
        $("#ip-address-auto").removeClass("bg-info").removeClass("bg-gray").addClass("bg-info");
        $("#ip-address-manu").removeClass("bg-info").removeClass("bg-gray").addClass("bg-gray");
    });
    $("#ip-address-manu").click(function () {
        $("#ip-address-input").css("display", "block").inputmask();
        $("#ip-address-manu").removeClass("bg-info").removeClass("bg-gray").addClass("bg-info");
        $("#ip-address-auto").removeClass("bg-info").removeClass("bg-gray").addClass("bg-gray");
    })

    $("#mac-address-auto").click(function () {
        $("#mac-address-input").css("display", "none");
        $("#mac-address-auto").removeClass("bg-info").removeClass("bg-gray").addClass("bg-info");
        $("#mac-address-manu").removeClass("bg-info").removeClass("bg-gray").addClass("bg-gray");
    });
    $("#mac-address-manu").click(function () {
        $("#mac-address-input").css("display", "block").inputmask();
        $("#mac-address-manu").removeClass("bg-info").removeClass("bg-gray").addClass("bg-info");
        $("#mac-address-auto").removeClass("bg-info").removeClass("bg-gray").addClass("bg-gray");
    })

    var dnsTemplate = $("#dns").prop("innerHTML");
    $("#dns").html("");
    $(".btn-dns-add").click(function () {
        $("#dns").append(dnsTemplate);
        $("#dns [data-inputmask]").inputmask();
    });
    $("#dns").on("click", ".btn-dns-del", function () {
        $(this).parents(".row").remove();
    });

    var envTemplate = $("#env").prop("innerHTML");
    $("#env").html("");
    $(".btn-env-add").click(function () {
        $("#env").append(envTemplate);
    });
    $("#env").on("click", ".btn-env-del", function () {
        $(this).parents(".row").remove();
    });

    var labelTemplate = $("#label").prop("innerHTML");
    $("#label").html("");
    $(".btn-label-add").click(function () {
        $("#label").append(labelTemplate);
    });
    $("#label").on("click", ".btn-label-del", function () {
        $(this).parents(".row").remove();
    });

    var hostTemplate = $("#host").prop("innerHTML");
    $("#host").html("");
    $(".btn-host-add").click(function () {
        $("#host").append(hostTemplate);
        $("#host [data-inputmask]").inputmask();
    });
    $("#host").on("click", ".btn-host-del", function () {
        $(this).parents(".row").remove();
    });

    var portTemplate = $("#port").prop("innerHTML");
    var portCount = 0;
    $("#port").html("");
    $(".btn-port-add").click(function () {
        portCount = portCount + 1;
        $("#port").append(portTemplate.replace(new RegExp("{{uuid}}", "gm"), portCount));
        $("#port [data-inputmask]").inputmask();
    });
    $("#port").on("click", ".btn-port-del", function () {
        $(this).parents(".row").remove();
    });
    $("#port").on("click", ".btn-port-host-ip-auto", function () {
        var uuid = $(this).attr("data-uuid");
        $(".btn-port-host-ip-auto[data-uuid=" + uuid + "]").removeClass("bg-info").removeClass("bg-gray").addClass("bg-info");
        $(".btn-port-host-ip-manu[data-uuid=" + uuid + "]").removeClass("bg-info").removeClass("bg-gray").addClass("bg-gray");
        $(".input-port-host-ip-input[data-uuid=" + uuid + "]").css("display", "none");
    });
    $("#port").on("click", ".btn-port-host-ip-manu", function () {
        var uuid = $(this).attr("data-uuid");
        $(".btn-port-host-ip-manu[data-uuid=" + uuid + "]").removeClass("bg-info").removeClass("bg-gray").addClass("bg-info");
        $(".btn-port-host-ip-auto[data-uuid=" + uuid + "]").removeClass("bg-info").removeClass("bg-gray").addClass("bg-gray");
        $(".input-port-host-ip-input[data-uuid=" + uuid + "]").css("display", "block").inputmask();
    });

    $(".toggle-item").click(function () {
        var target = $(this).attr("data-target");
        var display = $("#" + target).parent().css("display");
        if (display === undefined || display === "" || display === "flex") {
            $("#" + target).parent().css("display", "none");
            $($(this).html($(this).html().replace(new RegExp("隐藏", "gm"), "显示")));
            localStorage.setItem(LocalStorageKey.dockerContainerCreateSetting + "-" + target, "hide");
        } else {
            $("#" + target).parent().css("display", "flex");
            $($(this).html($(this).html().replace(new RegExp("显示", "gm"), "隐藏")));
            localStorage.setItem(LocalStorageKey.dockerContainerCreateSetting + "-" + target, "show");
        }
    });

    $(".toggle-item").each(function (i, n) {
        var target = $(n).attr("data-target");
        var setting = localStorage.getItem(LocalStorageKey.dockerContainerCreateSetting + "-" + target);
        if (setting === "hide") {
            $(n).click();
        }
    });

    var commandArea = CodeMirror.fromTextArea(document.getElementById("command-text"), {
        mode: "text/x-sh", theme: "darcula", readOnly: true
    });
    commandArea.setSize("auto", "auto");

    // 绑定复制按钮
    new ClipboardJS('#command-copy', {
        text: function(trigger) {
            return commandArea.getValue();
        }
    }).on('success', function(e) {
        parent.window.frameCtrl.toastr.success("复制成功");
    }).on('error', function(e) {
        parent.window.frameCtrl.toastr.error("复制失败");
    });

    function setValid(pass, dom) {
        if (pass) {
            dom.removeClass("is-invalid").addClass("is-valid");
        } else {
            dom.removeClass("is-valid").addClass("is-invalid");
        }
        return pass;
    }

    function execValid() {
        var data = {};
        var valid = true;

        data.name = $("#name").val();
        valid = setValid(Utils.notEmpty(data.name), $("#name")) && valid;

        data.image = "";
        var iamgeInputCss = $("#image-input-group").css("display");
        var iamgeSelectCss = $("#image-select-group").css("display");
        if (iamgeInputCss === "flex" && iamgeSelectCss === "none") {
            data.image = $("#image-input").val();
            valid = setValid(Utils.notEmpty(data.image), $("#image-input")) && valid;
        } else if (iamgeInputCss === "none" && iamgeSelectCss === "flex") {
            data.image = $("#image-select").val();
            valid = setValid(Utils.notEmpty(data.image), $("#image-select")) && valid;
        }

        data.arg = $("#arg").val();
        data.cpu = $("#cpu").val();
        data.memory = $("#memory").val();
        data.hostname = $("#hostname").val();

        if ($("#restart-no").prop("checked")) {
            data.restartPolicy = "no";
        } else if ($("#restart-fail").prop("checked")) {
            data.restartPolicy = "on-failure";
        } else if ($("#restart-always").prop("checked")) {
            data.restartPolicy = "always";
        } else if ($("#restart-unless").prop("checked")) {
            data.restartPolicy = "unless-stopped";
        } else {
            data.restartPolicy = "no";
        }

        data.privileged = $("#privileged").prop("checked");
        data.network = $("#network-select").val();

        if ($("#ip-address-auto > input:radio").prop("checked")) {
            data.ipAddress = "AUTO";
        } else if ($("#ip-address-manu > input:radio").prop("checked")) {
            data.ipAddress = $("#ip-address-input").val();
            valid = setValid(Utils.notEmpty(data.ipAddress), $("#ip-address-input")) && valid;
        } else {
            data.ipAddress = "AUTO";
        }

        if ($("#mac-address-auto > input:radio").prop("checked")) {
            data.macAddress = "AUTO";
        } else if ($("#mac-address-manu > input:radio").prop("checked")) {
            data.macAddress = $("#mac-address-input").val();
            valid = setValid(Utils.notEmpty(data.macAddress), $("#mac-address-input")) && valid;
        } else {
            data.macAddress = "AUTO";
        }

        data.ports = []
        $("#port > .row").each(function (i, n) {
            var port = {};

            port.containerPort = $(n).find(".input-port-container-port").val();
            valid = setValid(Utils.notEmpty(port.containerPort), $(n).find(".input-port-container-port")) && valid;

            port.hostPort = $(n).find(".input-port-host-port").val();
            valid = setValid(Utils.notEmpty(port.hostPort), $(n).find(".input-port-host-port")) && valid;

            if ($(n).find(".btn-port-host-ip-auto").children("input:radio").prop("checked")) {
                port.hostIp = "AUTO"
            } if ($(n).find(".btn-port-host-ip-manu").children("input:radio").prop("checked")) {
                port.hostIp = $(n).find(".input-port-host-ip-input").val();
                valid = setValid(Utils.notEmpty(port.hostIp), $(n).find(".input-port-host-ip-input")) && valid;
            } else {
                port.hostIp = "AUTO"
            }
            data.ports.push(port);
        });

        data.dns = [];
        $("#dns > .row").each(function (i, n) {
            var dns = $(n).find(".input-dns-input").val();
            valid = setValid(Utils.notEmpty(dns), $(n).find(".input-dns-input")) && valid;
            data.dns.push(dns);
        });

        data.hosts = [];
        $("#host > .row").each(function (i, n) {
            var host = {};

            host.url = $(n).find(".input-hosts-url").val();
            valid = setValid(Utils.notEmpty(host.url), $(n).find(".input-hosts-url")) && valid;

            host.ip = $(n).find(".input-hosts-ip").val();
            valid = setValid(Utils.notEmpty(host.ip), $(n).find(".input-hosts-ip")) && valid;

            data.hosts.push(host);
        });

        data.volumes = [];
        $("#volume > .row").each(function (i, n) {
            var volume = {};

            volume.source = $(n).find(".input-volume-host").val();
            valid = setValid(Utils.notEmpty(volume.source), $(n).find(".input-volume-host")) && valid;

            volume.destination = $(n).find(".input-volume-container").val();
            valid = setValid(Utils.notEmpty(volume.destination), $(n).find(".input-volume-container")) && valid;

            volume.mode = $(n).find(".select-volume-mode").val();
            valid = setValid(Utils.notEmpty(volume.mode), $(n).find(".select-volume-mode")) && valid;

            data.volumes.push(volume);
        });

        data.envs = [];
        $("#env > .row").each(function (i, n) {
            var env = {};

            env.key = $(n).find(".input-env-key").val();
            valid = setValid(Utils.notEmpty(env.key), $(n).find(".input-env-key")) && valid;

            env.value = $(n).find(".input-env-value").val();
            valid = setValid(Utils.notEmpty(env.value), $(n).find(".input-env-value")) && valid;

            data.envs.push(env);
        });

        data.labels = [];
        $("#label > .row").each(function (i, n) {
            var label = {};

            label.key = $(n).find(".input-label-key").val();
            valid = setValid(Utils.notEmpty(label.key), $(n).find(".input-label-key")) && valid;

            label.value = $(n).find(".input-label-value").val();
            valid = setValid(Utils.notEmpty(label.value), $(n).find(".input-label-value")) && valid;

            data.labels.push(label);
        });


        data.valid = valid;
        return data;
    }

    $("#command-show").click(function () {
        var data = execValid();
        if (!data.valid) {
            return;
        }
        var command = "docker run -d \\\r\n";
        command += " --name " + data.name + " \\\r\n";
        if (data.cpu !== "0") {
            command += " --cpus " + data.cpu + " \\\r\n";
        }
        if (data.memory !== "0") {
            command += " --memory " + data.memory + "g \\\r\n";
        }
        if (data.hostname !== "") {
            command += " --hostname " + data.hostname + " \\\r\n";
        }
        command += " --restart " + data.restartPolicy + " \\\r\n";
        if (data.privileged) {
            command += " --privileged \\\r\n";
        }
        command += " --network " + data.network + " \\\r\n";
        if (data.ipAddress !== "AUTO") {
            command += " --ip " + data.ipAddress + " \\\r\n";
        }
        if (data.macAddress !== "AUTO") {
            command += " --mac-address " + data.macAddress + " \\\r\n";
        }
        for (let i = 0; i < data.ports.length; i++) {
            if (data.ports[i].hostIp !== "AUTO") {
                command += " --publish " + data.ports[i].hostIp + ":" + data.ports[i].hostPort + ":" + data.ports[i].containerPort + " \\\r\n";
            } else {
                command += " --publish " + data.ports[i].hostPort + ":" + data.ports[i].containerPort + " \\\r\n";
            }
        }
        for (let i = 0; i < data.dns.length; i++) {
            command += " --dns " + data.dns[i] + " \\\r\n";
        }
        for (let i = 0; i < data.hosts.length; i++) {
            command += " --add-host " + data.hosts[i].url + ":" + data.hosts[i].ip + " \\\r\n";
        }
        for (let i = 0; i < data.volumes.length; i++) {
            command += " --volume " + data.volumes[i].source + ":" + data.volumes[i].destination + ":" + data.volumes[i].mode + " \\\r\n";
        }
        for (let i = 0; i < data.envs.length; i++) {
            command += " --env " + data.envs[i].key + "=" + data.envs[i].value + " \\\r\n";
        }
        for (let i = 0; i < data.labels.length; i++) {
            command += " --label " + data.labels[i].key + "=" + data.labels[i].value + " \\\r\n";
        }

        command += " " + data.image;
        if (data.arg !== "") {
            command += " " + data.arg;
        }

        commandArea.setValue(command);
    })

    $("#btn-ok").click(function () {
        var data = execValid();
        if (!data.valid) {
            return;
        }

        $.ajax({
            url: Url.dockerService.dockerContainerCreate + "?serverId=" + serverId,
            type: HttpMethod.post,
            data: JSON.stringify(data),
            contentType: ContentType.json,
            success: function (result, status, xhr) {
                parent.window.frameCtrl.toastr.success("创建成功！");
                parent.window.frameCtrl.windowCtrl.close();
            }
        });
    })

</script>

</body>
</html>